<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        仓库流转统计
        <!-- <h3>仓库流转统计</h3> -->
        <!-- <el-row>
          <el-col>入库总金额</el-col>
          <el-col>入库量</el-col>
          <el-col>出库金额</el-col>
          <el-col>出库量</el-col>
        </el-row> -->
      </el-header>
      <el-container>
        <el-aside width="48px" style="font-size: 12px">
          <el-row>&nbsp;</el-row>
          <el-row>今日</el-row>
          <el-row>昨日</el-row>
          <el-row>本月</el-row>
          <el-row>历史峰值</el-row>
        </el-aside>
        <el-main>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="EnterCountAmount" label="入库总金额" width="84px" />
            <el-table-column prop="EnterCount" label="入库量" width="60px" />
            <el-table-column prop="OutCountAmount" label="出库总金额" width="84px" />
            <el-table-column prop="OutCount" label="出库量" width="60px" />
          </el-table>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script lang="ts" setup>
const tableData = [
  {
    EnterCountAmount: 226330,
    EnterCount: 12560,
    OutCountAmount: 226330,
    OutCount: 12560
  },
  {
    EnterCountAmount: 225330,
    EnterCount: 14346,
    OutCountAmount: 225145,
    OutCount: 14346
  },
  {
    EnterCountAmount: null,
    EnterCount: 26985,
    OutCountAmount: null,
    OutCount: 26985
  },
  {
    EnterCountAmount: 225145,
    EnterCount: 26985,
    OutCountAmount: 225145,
    OutCount: 26985
  }
]
</script>
<style scoped lang="scss">
.el-aside {
  & .el-row {
    padding: 15px 0px;
  }
}
.el-table {
  font-size: 12px;
}
.el-header {
  height: 20px;
  color: rgb(70, 70, 70);
  font-size: 18px;
  font-weight: bold;
}
</style>
